<template>
    <div>
        <el-dialog title="新建订单" width="900px" :visible.sync="dialogVisible">
            <el-form ref="ruleForm" :model="form" :rules="rules" label-width="110px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item prop="user_id" label="客户">
                            <el-select
                                v-if="!userDisabled"
                                v-model="form.user_id"
                                filterable
                                remote
                                reserve-keyword
                                placeholder="请输入"
                                :remote-method="remoteKehuMethod"
                                style="width: 100%;"
                            >
                                <el-option
                                    v-for="item in kehuOptions"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                />
                            </el-select>
                            <el-input v-else v-model="form.user_name" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="订单类型">
                            <el-select v-model="form.order_type" placeholder="请选择" style="width: 100%;">
                                <el-option label="体验" :value="1" />
                                <el-option label="新购" :value="2" />
                                <el-option label="复购" :value="3" />
                                <el-option label="增购" :value="4" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="sign_date" label="签单日期">
                            <el-date-picker
                                v-model="form.sign_date"
                                type="date"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd"
                                placeholder="请选择"
                                style="width: 100%;"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="huikuan_date" label="回款日期">
                            <el-date-picker
                                v-model="form.huikuan_date"
                                type="date"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd"
                                placeholder="请选择"
                                style="width: 100%;"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="commission" label="回佣金额">
                            <el-input v-model="form.commission" type="text" placeholder="请输入" style="width: 100%;" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="loan" label="放款金额">
                            <el-input v-model="form.loan" type="text" placeholder="请输入" style="width: 100%;">
                                <template slot="append">万元</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="订单状态">
                            <el-select v-model="form.status" placeholder="请选择" style="width: 100%;">
                                <el-option label="进行中" :value="1" />
                                <el-option label="已完成" :value="2" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="business_id" label="所属商机">
                            <el-select
                                v-if="!businessDisabled"
                                v-model="form.business_id"
                                filterable
                                remote
                                reserve-keyword
                                placeholder="请输入"
                                :remote-method="remoteBuinessMethod"
                                style="width: 100%;"
                            >
                                <el-option
                                    v-for="item in businessOptions"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                />
                            </el-select>
                            <el-input v-else v-model="form.business_name" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="备注">
                            <el-input v-model="form.msg" type="textarea" placeholder="请输入" style="width: 100%;" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSubmit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { createOrder } from '@/api/order'
import { businessList } from '@/api/business'
import { userList } from '@/api/kehu'
export default {
    name: 'OrderAddDialog',
    data() {
        return {
            dialogVisible: false,
            userDisabled: false,
            businessDisabled: false,
            kehuOptions: [],
            businessOptions: [],
            form: {
                user_id: '',
                loan: '',
                commission: '',
                sign_date: '',
                huikuan_date: '',
                status: '',
                msg: '',
                business_id: ''
            },
            rules: {
                user_id: [{ required: true, message: '请选择客户', trigger: 'change' }],
                sign_date: [{ required: true, message: '请选择签单日期', trigger: 'change' }],
                huikuan_date: [{ required: true, message: '请选择回款日期', trigger: 'change' }],
                commission: [{ required: true, message: '请输入佣金', trigger: 'change' }],
                loan: [{ required: true, message: '请输入放款金额', trigger: 'change' }]
            }
        }
    },
    methods: {
        showDialog(item) {
            this.dialogVisible = true;
            this.resetParams();
            this.remoteBuinessMethod();
            this.remoteKehuMethod();
            this.resetForm();
            if (item.user_id) {
                this.$nextTick(() => {
                    this.form.user_id = item.user_id;
                    this.form.user_name = item.user_name;
                    this.userDisabled = true
                })
                
            }
            if (item.business_id) {
                this.$nextTick(() => {
                    this.form.business_id = item.business_id;
                    this.form.business_name = item.business_name;
                    this.businessDisabled = true
                })
                
            }
        },
        resetForm() {
            this.$nextTick(() => {
                this.$refs.ruleForm.resetFields();
            })
        },
        resetParams() {
            this.form = {
                user_id: '',
                loan: '',
                commission: '',
                sign_date: '',
                huikuan_date: '',
                status: '',
                msg: '',
                business_id: ''
            };
            this.userDisabled = false;
            this.businessDisabled = false;
        },
        handleSubmit(e) {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    createOrder(this.form).then(res => {
                        if (res.status == '1') {
                            this.$message.success('订单创建成功！')
                            this.$emit('success', res)
                        } else {
                            this.$message.error(res.msg)
                        }
                    }).finally(() => {
                        this.dialogVisible = false
                    })
                }
            })
        },
        remoteKehuMethod(query) {
            if (query !== '') {
                userList({keys: query}).then(res => {
                    this.kehuOptions = res.data.list;
                })
            }
        },
        remoteBuinessMethod(query) {
            if (query !== '') {
                businessList({keys: query}).then(res => {
                    this.businessOptions = res.data.list;
                })
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.tag-item {
    margin-right: 5px;
}
</style>